<template>
  <el-main class="">
    <!-- <div class="h-200vh">/menu</div> -->
    <!-- <el-tree
      default-expand-all
      :data="menuTree"
      :props="{
        label: (data) => data.menu.title,
        children: 'children',
      }"
      v-slot="{ node, data }"
    >
      <div class="">{{ data.menu.title }}</div>
      <div class="ml-auto">
        <el-button text type="primary" size="default" @click.stop
          >编辑</el-button
        >
      </div>
    </el-tree> -->
    <div class="">
      <nuxt-link
        :to="{
          name: 'system-menu-add',
        }"
        custom
        v-slot="{ navigate }"
      >
        <el-button type="primary" size="default" @click="navigate()">
          新增
        </el-button>
      </nuxt-link>
    </div>
    <el-table
      class="mt-2"
      :data="menuTree"
      row-key="menu.key"
      border
      default-expand-all
      :row-class-name="
        ({ row }) => (row.menu.status === Status.disable ? 'disable-row' : '')
      "
      v-loading="menus.pending.value"
    >
      <el-table-column prop="menu.title" label="标题" fixed min-width="160" />
      <!-- <el-table-column v-if="isMobile" type="expand" v-slot="{ row }" fixed>
        <div class="">
          <div class="">{{ row.menu.title }}</div>
        </div>
      </el-table-column> -->

      <template v-if="!isMobile">
        <el-table-column prop="menu.key" label="编码" min-width="100" />
        <el-table-column prop="menu.path" label="路由" show-overflow-tooltip />
        <el-table-column
          prop="menu.icon"
          label="图标"
          v-slot="{ row }"
          width="60"
          align="center"
        >
          <el-icon>
            <icon :name="row.menu.icon"></icon>
          </el-icon>
        </el-table-column>
        <el-table-column
          prop="menu.type"
          label="类型"
          :formatter="
            (row, column, cellValue, index) =>
              menuTypeDict.data.value?.get(cellValue)
          "
          width="60"
          align="center"
        />
        <el-table-column
          prop="menu.status"
          label="状态"
          v-slot="{ row }"
          width="60"
          align="center"
        >
          <!-- <span>{{ row.menu.status }}</span> -->
          <!-- <el-checkbox
            :checked="true"
            disabled
            :label="statusDict.data.value?.get(row.menu.status)"
          /> -->
          <!-- <div class="flex items-center"> -->

          <el-icon
            size="20"
            :class="
              row.menu.status === Status.enable
                ? 'text-success'
                : 'text-disabled'
            "
          >
            <icon
              :name="
                row.menu.status === Status.enable
                  ? 'mdi:checkbox-marked'
                  : 'mdi:checkbox-blank-outline'
              "
            ></icon>
          </el-icon>
          <!-- <icon name="mdi:ab-testing"></icon> -->

          <!-- <span class="">{{
              statusDict.data.value?.get(row.menu.status)
            }}</span> -->
          <!-- </div> -->
        </el-table-column>
      </template>
      <el-table-column
        prop=""
        label="操作"
        align="center"
        v-slot="{ row }"
        width="84"
      >
        <nuxt-link
          :to="{
            name: 'system-menu-key',
            params: {
              key: row.menu.key,
            },
          }"
          custom
          v-slot="{ href, navigate }"
        >
          <el-button
            text
            type="primary"
            :href="href"
            size="default"
            @click.stop="navigate"
            >编辑</el-button
          >
        </nuxt-link>
        <!-- <el-button
          text
          type="primary"
          size="default"
          @click.stop="navigateToMenuKey(row.menu.key)"
          >编辑</el-button
        > -->
      </el-table-column>
    </el-table>
    <child-page-drawer
      exclude="system-menu"
      :size="isMobile ? '100%' : '425px'"
    >
      <template #header>
        <span>菜单详情</span>
      </template>
      <NuxtPage />
    </child-page-drawer>
    <!-- <div class="border-t-solid border-t-1 border-red"></div> -->
  </el-main>
</template>

<script setup lang="ts">
// import { useMockFetch } from '~/utils/useMock';
import { type Menu, MenuType } from '~~/types/menu.d';
import { Status } from '~~/types/status.d';
import { type MenuMap } from '~~/utils/useMenus';

definePageMeta({
  // name: 'drawer',
});

const isMobile = useMediaQuery('(max-width: 425px)');

const menus = useFetchApi('/system/menu', {
  key: 'get-system-menu',
  query: {
    // status: Status.enable,
  },
  default: () => <Menu[]>[],
});
watchAsyncDataError(menus);

const menuMap = computed(() => {
  // const tree = new Set();
  const list = menus.data.value || [];
  const map: MenuMap = list.reduce((map, value) => {
    map.set(value.key, {
      menu: value,
      route:
        value.type === MenuType.page && value.path
          ? useRouter().resolve(value.path)
          : null,
      children: [],
    });
    return map;
  }, new Map());

  menus.data.value?.forEach((value) => {
    const item = map.get(value.key);
    if (!item) return;

    // if (!item.children) {
    //   item.children = [];
    // }
    // if (!item.childrenByRoleFilter) {
    //   item.childrenByRoleFilter = [];
    // }
    // if (!value.parent) {
    //   return;
    // }
    if (value.parent && map.has(value.parent)) {
      const parent = map.get(value.parent);
      if (!parent) return;
      // if (!parent.children) {
      //   parent.children = [];
      // }
      // if (!parent.childrenByRoleFilter) {
      //   parent.childrenByRoleFilter = [];
      // }
      parent.children.push(item);
      // if (auth.hasMenu(value.key)) {
      //   parent.childrenByRoleFilter.push(item);
      // }
    }
  });

  return map;
});
const menuTree = computed(() =>
  menus.data.value
    ?.filter((value) => !value.parent)
    .map((value) => menuMap.value.get(value.key)),
);

const statusDict = useDict('system.status');
const menuTypeDict = useDict('system.menuType');

// const navigateToMenuKey = useDebounce(
//   (key) => {
//     console.log('🚀 ~ file: menu.vue:186 ~ navigateToMenuKey ~ key:', key);
//     navigateTo({
//       name: 'system-menu-key',
//       params: {
//         key,
//       },
//     });
//   },
//   500,
//   {
//     leading: true,
//     trailing: false,
//   },
// );

onBeforeRouteUpdate((updateGuard) => {
  updateGuard.name === 'system-menu' && menus.refresh();
});
</script>

<style scoped lang="scss">
// .el-main {
//   :deep(.child-page-modal) {
//     // 约束子页面抽屉在父页面内
//     position: absolute;
//   }
// }
.el-tree {
  :deep(.el-tree-node__content) {
    height: auto;
  }
  :deep(.el-tree-node) {
    // border-top: 1px solid #000;
    --uno: border-t-solid border-t-1 border-gray-300;
  }
  :deep(> .el-tree-node) {
    // border-top: 1px solid #000;
    --uno: border-b-solid border-b-1 border-gray-300;
  }
}
</style>
